<template>
  <div class="app-container">
    <el-card class="box-card">

      <el-row>
        <el-col :span="24" ref="queryForm">
          <div style="overflow: hidden;">
            <div v-for="(item, index) in searchList" :key="index">
              <ul class="menu-line-List">
                <li>
                  <el-select v-model="item.queryType" placeholder="请选择"
                    :style="{ visibility: index == 0 ? 'hidden' : 'visible' }">
                    <el-option v-for="item in queryTypeOption" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <div class="line-main">
                    <div class="sel">
                    <el-select v-model="item.column" placeholder="请选择" filterable
                      @visible-change="focustap(item, $event)" @change="onColumnTap(item, $event)">
                      <el-option v-for="item in columnOption" :key="item.FIELD_NAME" :label="item.FIELD_CAPTION"
                        :value="item.FIELD_NAME">
                      </el-option>
                    </el-select>
                    </div>
                    <div style="margin: 2px 10% 0 17%; width: 100%;">
                      <!-- {{ item.child }}--{{item.column  }} -->
                      <vInput :item="item.child" :inputParams="inputParams" @onChangeTap="onChangeTap(item, $event)" isType='senior' @handleQuery="queryTap"></vInput>
                    </div>
                  <div class="sel2">
                    <el-select v-model="item.showType" placeholder="请选择">
                      <el-option v-for="item in showTypeOption" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  </div>
                  <i :style="{ visibility: index == 0 ? 'hidden' : 'visible' }" class=" line-size el-icon-remove-outline"
                    @click="removeTap(index, item)" style="cursor:pointer"></i>
                  <i :style="{ visibility: index != search.length - 1 ? 'hidden' : 'visible' }"
                    class=" line-size el-icon-circle-plus-outline" style="cursor:pointer" @click="addTap(index)"></i>
                </li>
              </ul>
            </div>

            <div class="searchCheck">
              <div style="width: 8%">
                <label style="width: 80%; display: inline-block; text-align-last: justify;">全宗</label>
                <font style="width: 10%;vertical-align: top; display: inline-block;margin-left:7px">：</font>
              </div>
              <div style=" flex-wrap: wrap; width: 90%" :style="isSize">
                <el-select v-model="qzh" placeholder="请选择" @change="onqzhChangeTap($event)" style="width:200px;">
                  <el-option v-for="i in qzhList" :key="i.FONDS_CODE" :label="i.FONDS_NAME" :value="i.FONDS_CODE">
                  </el-option>
                </el-select>

                <div v-if="archivesCategory.length>0&&qzh!='-1'" style="margin-top:5px;margin-bottom:15px; max-height: 140px; overflow-y: auto;">
                  <div class="category-menu">
                    <el-radio-group @input="orderInputTap" v-model="groupId" >
                      <el-radio :style="isSize" v-for="item in archivesCategory" :key="item.groupId" :label="item.groupId">{{ item.label
                      }}</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <el-divider>
            <!-- this.showOrhide=false 收起   this.showOrhide=false 展开 -->
            <el-button v-if="showOrhide" type="primary" icon="el-icon-arrow-up" circle
              @click="hanlerclickTap"></el-button>

            <el-button v-else type="primary" icon="el-icon-arrow-down" circle @click="hanlerclickTap"></el-button>

          </el-divider>
          <div style="text-align: center;margin-top:10px">
            <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置条件</el-button>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="queryTap">检索</el-button>
            <el-button type="warning" plain icon="el-icon-setting" @click="headerSettings" v-show="isShowButton">表头设置</el-button>
          </div>
        </el-col>
      </el-row>


      <tableList style="margin-top:20px" v-if="tableHeight" :tableHeaderList="tableHeaderList" :tableData="tableData" ref="tableList"
        :loading="loading" :tableHeight="tableHeight" @celldblclick="celldblclick" @sortChange="sortChange"></tableList>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
      <div class="menu-too" @click="drawer = true">使用说明</div>
    </el-card>

    <el-drawer title="高级检索使用方法：" :visible.sync="drawer" :before-close="handleClose" :style="isSize">
      <ul class="jsMenu" >
        <li>高级检索支持对条件的精确与模糊查询，支持多条件查询。</li>
        <li>简洁查询 在搜寻引擎中输入关键词，然后点击“检索”就行了，系统很快会返回查询结果，这是最简洁的查询方法，使用便利，但是查询的结果却不精确，可能包含着很多无用的信息。</li>
        <li>使用布尔检索：</li>
        <li>所谓布尔检索，是指通过标准的布尔规律关系来表达关键词与关键词之间规律关系的一种 查询方法，这种查询方法允许我们输入多个关键词，各个关键词之间的关系可以用规律关系词来表示。</li>
        <li>and,称为规律”与”，用and进行连接，表示它所连接的两个词必需同时消失在查询结 果中例如，输入"computerand book"它要求查询结果中必需同时包含computer 和 book。</li>
        <li>or,称为规律"或”，它表示所连接的两个关键词中任意一个消失在查询结果中就可以， 例如输入"computer or
          book”,就要求查询结果中可以只有computer，或只有book，或同时包含computer和book。</li>
        <li>not,称为规律”非”，它表示所连接的两个关键词中应从第一个关键词概念中排解其次个 关键词，例如输入"automobile not car”，就要求查询的结果中包含automobile (汽车)， 但同时不能包含car。
        </li>
      </ul>
    </el-drawer>

    <!--start  组件详情 -->
    <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
      @detailsHandleClose="detailsHandleClose">
    </jianDetailsOpen>
    <!--end 组件详情 -->
    <!-- start 组卷\项目详情 -->
    <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
      @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
    <!-- end 组卷\项目详情 -->

    <!-- start 表头设置 -->
    <transFer :title="headerTitle" :dataChecked="myDataChecked" :cities="HeaderData"
              @determine="submitHeader" @closeFilter="closeHeader" :open="headerOpen" :isHeaderOrder='true'>
    </transFer>
    <!-- end 表头设置 -->
  </div>
</template>
<script>
import { getColumn, getArchivesCategory, queryList, fieldList } from "@/api/archive/retrieval/comprehensiveAdvancedQuery";
import {
  getSearchList, addWords,
  batchInsert,
  getcateidbyid,
  getInfo,
  getKeyWords, getCategoryList, getQueryList, getShowList
} from "@/api/archive/retrieval/fullTextSearch";
import {getqzhList} from "@/api/archive/retrieval/catalogueSearch";
import tableList from "@/components/tableList/index.vue";
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' //卷详情
import { getLastIndexOf } from "@/utils/index.js"
import vInput from "@/views/archive/retrieval/comprehensiveAdvancedQuery/input"; //不同类型的input 框
import { deptTreeNoDateScope } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {addhead, gethead} from "@/api/archive/digitalizeReceive/archiveRecycleBin";
import transFer from "@/components/transFer";
export default {
  components: {
    vInput,
    tableList,
    jianDetailsOpen,
    juanDetailsOpen,
    Treeselect,
    transFer
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //高级检索使用方法是否弹窗
      drawer: false,
      // 初始化一条数据
      search: [
        {
          id: "0",
          column: undefined, //查询条件
          child: {}, //查询数据
          queryType: "and", //AND、OR、NOT
          showType: "0",
          value: undefined
        },
        {
          id: "1",
          column: undefined,
          child: {}, //查询数据
          queryType: "and",
          showType: "0",
          value: undefined
        },
        {
          id: "2",
          column: undefined,
          child: {}, //查询数据
          queryType: "and",
          showType: "0",
          value: undefined
        }
      ],
      // 检索连接方式下拉框
      queryTypeOption: [
        { value: 'and', label: '和' },
        { value: 'or', label: '或' },
        { value: 'not', label: '不包含' },
      ],
      // 查询字段下拉框
      columnOption: [],
      // 查询类型下拉框
      showTypeOption: [
        { value: '0', label: '精确' },
        { value: '1', label: '模糊' },
      ],

      // 档案门类
      archivesCategory: [],
      categoryInfo: "", //当前点击的门类信息
      groupId: "-1",
      xitem: {},
      inputParams: {},
      arrlist: [],
      column: "",
      showOrhide: true,
      searchList: [],  //收起  展开数据
      queryParams: {
        order: undefined,
        pageNum: 1,
        pageSize: 10,
        queryParams: []
      },
      tableHeight: "",
      tableHeaderList: [], //table表头数据
      tableData: [],//table列表数据
      total: 0,
      jianDetailsOpen: false,//件详情弹窗
      juanDetailsOpen: false,//卷详情弹窗
      // isRetrieval: true,
      visiblechange: "",
      isSortChange: true,
      optionSelect:[],
      isStyle:"",

      headerTitle: '表头设置',
      // 展示右侧数据
      myDataChecked: [],
      headerData: [],
      HeaderData: [],
      headerOpen: false,
      isShowButton: true,
      qzh:""
    }
  },
  computed: {

    isSize() {

      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }




  },
  created() {

    this.getColumnOption()
    this.searchList = this.search;
    this.queryParams.menuId = this.$route.meta.menuId;
    this.queryParams.groupId = undefined;
    this.queryParams.categoryId = '-1'
    this.queryParams.type = '-1'
    this.getqzhListPost();
  },
  methods: {
     //全宗号列表
     getqzhListPost() {
      getqzhList(this.$route.meta.menuId).then(res => {
        if (res.code == 200) {
          this.qzhList = res.data;
          this.qzh =  res.data[0].FONDS_CODE;
          this.queryParams.qzh =  res.data[0].FONDS_CODE;
          this.getCategory()  // 获取门类
          // this.queryTap()
        }
      })
    },
    //全宗号列表下拉事件
    onqzhChangeTap(val) {
      this.queryParams.qzh = val;
      this.showSearch=false;
      this.getCategory()  // 获取门类
    },
    //动态设置table的高度
    tableHeightData() {
      this.$nextTick(
        () => {
          let h = document.documentElement.clientHeight
          h = h - 250
          if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
            h = h - this.$refs.queryForm.$el.offsetHeight
          }

          if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
            h = h - this.$refs.refbut.$el.offsetHeight
          }
          this.tableHeight = h > 530 ? h : 530 // 根据自己项目定高度
          return h
        }
      )
    },
    getColumnOption() {
      var groupId = ''
      if (this.groupId == "-1") {
        groupId = undefined
      } else {
        groupId = this.groupId
      }
      getColumn({
        groupId: groupId,
        menuId:this.$route.meta.menuId
      }).then(response => {
        this.columnOption = response.data;
      })
    },
    // 获取门类
    getCategory() {
      getArchivesCategory({menuId:this.$route.meta.menuId,qzh: this.queryParams.qzh}).then(response => {
        var data = response.data.categoryList.map(item => {
          return {
            // 门类id
            value: item.ID,
            // 门类名称
            label: item.NAME,
            // 元数据方案id
            groupId: item.GROUP_ID,
            // 类型
            type: item.TYPE
          }
        })
        this.archivesCategory = []
        this.archivesCategory = [{
          groupId: '-1',
          label: "全部",
        }]
        this.archivesCategory.push(...data)
      })
    },
    removeTap(index, item) {
      this.search.splice(index, 1)
      for (var i in this.arrlist) {
        if (this.arrlist[i].column == item.column) {
          this.arrlist.splice(i, 1)
        }
      }
      for (var i in this.search) {
        this.search[i].id = i
      }
    },
    addTap(index) {
      this.search.push({
        id: index + 1,
        column: undefined,
        child: {}, //查询数据
        queryType: "and", //AND、OR、NOT
        showType: "0",
        value: undefined
      })
      // console.log(this.search, "---------------------------------")
    },
    resetQuery() {
      if (this.$refs.tableList != undefined) {
        this.queryParams.order = undefined;
        this.$refs.tableList.clearSort()
      }
      this.search = [
        {
          id: "0",
          column: undefined, //查询条件
          child: {}, //查询数据
          queryType: "and", //AND、OR、NOT
          showType: "0",
          value: undefined
        },
        {
          id: "1",
          column: undefined,
          child: {}, //查询数据
          queryType: "and", //AND、OR、NOT
          showType: "0",
          value: undefined
        },
        {
          id: "2",
          column: undefined,
          child: {}, //查询数据
          queryType: "and", //AND、OR、NOT
          showType: "0",
          value: undefined
        }
      ]
      this.searchList = this.search;
      this.arrlist = [];
      this.queryParamsArr = [];
      // this.queryParams.type = undefined;
      // this.queryParams.categoryId = undefined;
    },


    //检索
    queryTap() {
      this.isSortChange = true
      if (this.$refs.tableList != undefined) {
        this.queryParams.order = undefined;
        this.$refs.tableList.clearSort()
      }
      var queryParamsArr = [];
      this.search.filter(item => {
        if (item.value != undefined) {
          queryParamsArr.push({
            column: item.column,
            queryType: item.queryType,
            showType: item.showType,
            value: item.value
          })
        }
      })

      if (queryParamsArr.length >= 1) {
        queryParamsArr[0].queryType = ""
      }
      this.queryParams['queryParams'] = queryParamsArr
      // 检索时收起
      this.showOrhide = false
      this.searchList = [this.search[0]]
      // this.hanlerclickTap();
      this.getHeaderListPost();  //获取表头

    },

    getHeaderListPost() {
      fieldList({
        categoryId: this.queryParams.categoryId,
        menuId: this.queryParams.menuId,
        groupId: this.queryParams.groupId,
        qzh: this.queryParams.qzh,
        // type: this.queryParams.type
        type: -1
      }).then(res => {
        this.tableHeaderList = res.data;
        this.getList();
      })

    },
    getList() {
  var data = {
        categoryId: this.queryParams.categoryId,
        groupId: this.queryParams.groupId,
        menuId: this.queryParams.menuId,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        queryParams: this.queryParams.queryParams,
        type: "-1",
        qzh: this.queryParams.qzh,

      }
      queryList(data).then(response => {
        // for (let i = 0; i < response.rows.length; i++) {
        //   var data = []
        //   this.typeOption = []
        //   if(response.rows[i].IS_EFILE == '是') {
        //     data.push(...[
        //       {value: '1', label: '电子件'}
        //     ])
        //   }
        //   if(response.rows[i].IS_ENTITY == '是'){
        //     data.push(...[
        //       {value: '0', label: '实体件'}
        //     ])
        //   }
        //   if(response.rows[i].IS_EFILE != '是' && response.rows[i].IS_ENTITY != '是'){
        //     data = []
        //   }
        //   this.typeOption.push(...data)
        //   response.rows[i].typeOption = this.typeOption
        // }
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
        this.tableHeightData();
      })
    },

    //关闭高级检索使用方法弹窗
    handleClose(done) {
      done();
    },

    //门类切换
    orderInputTap(val) {
      // this.isShowButton = true
      if (val == '-1') {
        this.isShowButton = true
      } else {
        this.isShowButton = true
      }
      this.inputParams = {}
      this.categoryInfo = this.archivesCategory.filter(item => { return item.groupId == val })
      var groupId = ''
      if (this.groupId == "-1") {
        groupId = undefined
      } else {
        groupId = this.categoryInfo[0].groupId;
      }
      this.queryParams.groupId = groupId

      if (val != "-1") {
        // console.log(val, this.categoryInfo[0], "000000000000")
        // this.queryParams.type = this.categoryInfo[0].type;
        this.queryParams.type = this.categoryInfo[0].type;
        this.queryParams.categoryId = this.categoryInfo[0].value;

      } else {
        this.queryParams.type = '-1'
        this.queryParams.categoryId = '-1'
      }
      // console.log(this.queryParams)
      this.groupId = val;
      this.isSortChange = false
      this.resetQuery();
      this.getColumnOption();


    },

    focustap(item, val) {

      if (val) {
        this.visiblechange = item.column
        // console.log("dsklfjk", this.visiblechange)
      }


    },
    //查询列表条件下拉切换
    onColumnTap(item, val) {
      console.log(item, val, this.inputParams, "+++++++++++")
      this.$set(this.inputParams, val, undefined)
      var childItemx = this.columnOption.filter(res => { return res.FIELD_NAME == val })
      var itemx = this.search.filter(i => { return i.column == item.column })

      console.log(this.arrlist, this.search, childItemx, itemx)
      //循环新数组

      this.arrlist.map((i, index) => {
        // 判断新数组里面的column 是否有  当前选择的val 值
        // console.log(i.column != undefined && i.column == val, i.column, this.arrlist)
        if (i.column != undefined && i.column == val) {//有
          console.log(i, index)
          //并且如果 当前点击的ID不等于this.arrlist 的ID
          if (i.column == item.column) {
            this.$alert('已经有当前查询条件', '警告', {
              confirmButtonText: '确定',
              callback: action => {
                //清空页面当前选择的重复数据
                for (let j = 0; j < itemx.length; j++) {
                  if (item.id == itemx[j].id) {
                    itemx[j].column = undefined;
                    itemx[j].child = {};
                  }
                }
      //           for (var i in this.arrlist) {
      //             if (this.arrlist[i].id == item.id) {
      //               this.arrlist.splice(i, 1)
      //             }
      //           }
              }
            });
            return false
          }
        } else {
          delete this.inputParams[this.visiblechange]
          // 将不同的数据剔除
          this.arrlist = this.arrlist.filter(item => Object.keys(this.inputParams).includes(item.column));
        }
      })

      //循环this.search
      this.search.map((j, jndex) => {
        var arr = []
        //判断当前选择的数据 是否存在this.search列表里面
        if (j.column == item.column) {
          //如果存在  将当前查询的数据条件childItemx[0];放入对应的this.search列表里面
          j.child = childItemx[0];
          //然后push到新的数组里面
          if (this.arrlist.length > 0) {
            arr = this.arrlist.filter(iem => { return iem.column != item.column })
          }
          arr.push({
            id: item.id,
            column: val,
            child: itemx[0]
          })
          this.arrlist = arr;
        }
      })

      // // console.log(this.search, this.arrlist, "+++")
      this.searchList = this.search;
    },

    //输入下拉框
    onChangeTap(item, data) {
      for (var i in this.search) {
        for (var key in data) {
          if (this.search[i].column == key) {
            this.search[i].value = data[key]
          }
        }
      }
      // // console.log(item, data, this.search, this.inputParams, "__")

    },

    //显示隐藏    // this.showOrhide=false 收起   this.showOrhide=false 展开
    hanlerclickTap() {
      this.showOrhide = this.showOrhide ? false : true
      if (this.showOrhide == false) {

        this.searchList = [this.search[0]]

      } else {
        this.searchList = this.search;
      }
      // console.log(this.searchList, "----------")
    },

    //排序
    sortChange(val) {
      if (this.isSortChange == true) {
        // console.log(val, "ksdfjkl")
        this.queryParams.order = val;
        // console.log(this.queryParams, "+++")
        this.getList();
      } else {
        this.$refs.tableList.clearSort()
      }
    },
    //关闭详情页面
    detailsHandleClose() {
      this.jianDetailsOpen = false;
      this.juanDetailsOpen = false;
    },

    showHistory() {
      getInfo().then(res => {
        this.form = {
          // userName: res.user.userName,
          userId: res.user.userId,
          menuId: this.$route.meta.menuId
        }

      })
    },
    //双击列表进入详情页面
    celldblclick(row) {
      this.subStr = getLastIndexOf(row.SUB_TABLE_NAME);
      var level = "";
      var type = "";
      var label = ""
      if (getLastIndexOf(row.SUB_TABLE_NAME) == "F") {  //F 件
        level = 0
        type = "f"
        label = row.TITLE
      } else if (getLastIndexOf(row.SUB_TABLE_NAME) == "V") { //卷
        level = 1
        type = "v"
        label = row.TITLE
      } else { //项目
        level = 3
        type = "x"
        label = row.XMMC
      }
      this.form = {
        id: row.DA_ID,
        type: type
      }
      getcateidbyid(this.form).then(response => {
        this.celldbData = {
          id: row.DA_ID,
          categoryId: response.data,
          menuId: this.$route.meta.menuId,
          sub_table_name: row.SUB_TABLE_NAME,
          label: label,
          level: level,
          ifSub_table_name: row.SUB_TABLE_NAME,
          isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
          tableHeaderList: this.tableHeaderList
        }
        this.$nextTick(() => {
          if (this.subStr == "F") {  //F 进入件详情
            this.jianDetailsOpen = true;
          } else { //进入卷详情 和项目详情
            this.juanDetailsOpen = true
          }
        })
      })
    },
    // 表头设置
    headerSettings() {
      this.headerOpen = true
      this.myDataChecked = []
      var form = JSON.parse(JSON.stringify(this.queryParams))
      // 1: 门类全部   分类全部              左: null  null    右: -1 -1
      // 2: 门类全部  分类选层次(件卷项目)     左: null   0/1/3    右: -1   0/1/3
      // 3: 门类选择   分类全部              左: id  null        右: id   -1
      if (this.queryParams.categoryId == '-1') {
        form.categoryId = null
      } else {
        form.categoryId = this.queryParams.categoryId
      }
      if (this.queryParams.type == '-1') {
        form.type = null
      } else {
        form.type = "-1"
      }
      fieldList(form).then(response => {
        if (response.data != undefined) {
          this.headerData = response.data.map((item, index) => {
            return {
              fieldCaption: item.FIELD_CAPTION,
              fieldName: item.FIELD_NAME,
              key: index,
              isOrder: 'none'
            }
          })
          gethead({tablemenuId: this.$route.meta.menuId, zltype: "-1", cateGoryId: this.queryParams.categoryId,qzh:this.queryParams.qzh}).then(res => {
            if (res.msg != null ) {
              var arr = res.msg.split(',')
              const result = arr.reduce((acc, item) => {
                const [key, value] = item.split(" ");
                acc[key] = value;
                return acc;
              }, {});
              for (let i = 0; i < arr.length; i++) {
                if (this.headerData.filter((item) => item.fieldName == Object.keys(result)[i]).length != 0) {
                  const data = this.headerData.filter((item) => item.fieldName == Object.keys(result)[i])
                  data[0].isOrder = Object.values(result)[i]
                  this.myDataChecked = this.myDataChecked.concat(data)
                }
              }
            }
            this.HeaderData = this.headerData
          })
        }
      })
    },
    // 保存
    submitHeader(value, isOrder) {
      this.form = {
        tablemenuId: this.$route.meta.menuId,
        // zltype: this.queryParams.type
        zltype: "-1"
      }
      if (this.queryParams.categoryId != undefined) {
        this.form.cateGoryId = this.queryParams.categoryId
      } else {
        this.form.cateGoryId = '-1'
        this.queryParams.categoryId = '-1'
      }
      var arr = []
      for (var j = 0; j < value.length; j++) {
        for (var i = 0; i < isOrder.length; i++) {
          if (isOrder[i].key == value[j]) {
            const str = isOrder[i].code + "$" + isOrder[i].isOrder
            arr.push(str)
          }
        }
      }
      this.form.content = arr.toString()
      this.form.qzh= this.qzh;
      addhead(this.form).then(res=>{
        this.headerOpen = false
        this.myDataChecked = []
        this.headerData = []
        this.queryTap()
      })
    },
    closeHeader() {
      this.headerOpen = false
      this.myDataChecked = []
      this.headerData = []
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .menu-line-List {
  margin: 0 !important;
  padding: 0 !important;
}

.box-card {
  height: calc(100vh - 120px) !important;
  overflow-y: scroll;
}

.line-main {
  border: 1px solid #DCDFE6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // overflow: hidden;
  position: relative;
  height: 43px;
  line-height: 32px;
  width: 85%;
  border-radius: 3px;
}

.el-select {
  width: 150px;
}

/* 单选框wrapper */
.el-radio {
  width: 300px;
  /* 设置单选框宽度 */
  font-size: 20px;
  line-height: 20px;
}

/* 文本部分 */
.el-radio .el-radio__label {
  font-size: 20px;
  line-height: 20px;
  width: 100%;
}

/* 图标部分 */
.el-radio__inner {
  width: 20px;
}


.sel {
  position: absolute;
  clip: rect(2px 219px 30px 2px);
  width: 200px;
  height: 28px;
  line-height: 28px;
  font-size: 15px;
  font-weight: bold;
  top: 2px;
}

.sel2 {
  position: absolute;
  clip: rect(2px 79px 30px 0px);
  width: 90px;
  height: 28px;
  line-height: 28px;
  font-size: 15px;
  font-weight: bold;
  right: 0px;
  top: 2px;
}

.menu-line-List li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5%;
}

.line-size {
  font-size: 25px;
  line-height: 38px;
}


.menu-too {
  position: fixed;
  bottom: 30px;
  right: 20px;
  width: 60px;
  height: 30px;
  background: #e6a23c;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  padding-left: 6px;
  cursor: pointer;
  z-index: 999999999;
}

.category-menu {

  .el-radio {
    width: auto !important;
    line-height: 40px;
  }

  width:100%;
  float:right;
  clear: both;
  padding: 10px 0;
}

.jsMenu {
  line-height: 30px;
  padding: 0 30px;
  box-sizing: initial;
}

.jsMenu li {
  text-indent: 45px;
  color: #606266;
}

::v-deep .el-drawer__header {
  border-bottom: 1px solid #DCDFE6;
  padding-bottom: 20px;
  margin-bottom: 10px;

}

::v-deep .el-drawer__header span {
  font-size: 20px;
  font-weight: 600;
  color: #606266;
}



.treeselectBiTian {
    width: 100%;
    border: 1px solid red;
}

 .vue-treeselect__control {
    height: inherit;
}

 .vue-treeselect__placeholder,
.vue-treeselect__single-value {
    line-height: inherit;
}
.vue-treeselect__menu-container {

fill: red;

}

.searchCheck {
  margin-left: 41px;
  max-height: 200px;
margin-top: 10px;
  display: flex;
  line-height: 36px;
  font-size: 14px;
  color: #606266;
}

</style>
